---
title: Excalidraw
description: Create drawings and diagrams as block nodes.
docs:
  - route: /docs/components/excalidraw-element
    title: Excalidraw Element
---

<ComponentPreview name="playground-demo" id="excalidraw" />

<PackageInfo>

## Features

- Integrates Excalidraw library for creation of drawings and diagrams.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-excalidraw
```

## Usage

```tsx
import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
import { SelectOnBackspace } from '@udecode/plate-select';

const plugins = [
  // ...otherPlugins
  ExcalidrawPlugin,
  SelectOnBackspace.configure({
    options: { query: { allow: [ExcalidrawPlugin.key] } },
  }),
];
```

## Plugins

### ExcalidrawPlugin

Adds Excalidraw functionality to the editor.

## API

#### insertExcalidraw

Inserts an Excalidraw element into the editor.

<APIParameters>
<APIItem name="editor" type="PlateEditor">
  The editor instance.
</APIItem>
<APIItem
  name="props"
  type="TNodeProps<TExcalidrawElement>"
  optional
>
The props for the Excalidraw element.
</APIItem>
<APIItem name="options" type="InsertNodesOptions" optional>
  The options for inserting the Excalidraw element.
</APIItem>
</APIParameters>

## API Components

### useExcalidrawElement

A behavior hook for the Excalidraw component.

<APIState>
<APIItem name="element" type="TExcalidrawElement">
The Excalidraw element.
</APIItem>
<APIItem name="libraryItems" type="LibraryItems" optional>
The library items to be displayed in the Excalidraw component.

- **Default:** `[]`

</APIItem>
<APIItem name="scrollToContent" type="boolean" optional>
Determines whether to scroll to the content inside the Excalidraw component.

- **Default:** `true`

</APIItem>
</APIState>

<APIReturns>
  <APIItem name="Excalidraw" type="any">
    The Excalidraw component.
  </APIItem>
  <APIItem name="excalidrawProps" type="ExcalidrawProps">
    The props to be passed to the Excalidraw component.
  </APIItem>
</APIReturns>